<template>
<div>
    <Breadcrumb>
      <BreadcrumbItem>管理员添加</BreadcrumbItem>
    </Breadcrumb>
    <Divider />
    <i-form v-ref:formDate :model="formDate" :rules="ruleValidate" :label-width="90">
        <Form-item label="管理员账号" prop="loginname">
            <i-input v-model="formDate.loginname" placeholder="请输入账号" style="width:300px"></i-input>
        </Form-item>
          <Form-item label="密码" prop="password">
            <i-input type="password" v-model="formDate.password" placeholder="请输入密码" style="width:300px"></i-input>
        </Form-item>
        <Form-item label="确认密码" prop="passwordCheck">
          <i-input type="password" v-model="formDate.passwordCheck" placeholder="再次确认密码" style="width:300px"></i-input>
        </Form-item>
          <Form-item label="状态" prop="state">
            <i-input v-model="formDate.state" placeholder="请输入状态" style="width:300px"></i-input>
        </Form-item>
        <Form-item label="真实姓名" prop="realname">
            <i-input v-model="formDate.realname" placeholder="请输入姓名" style="width:300px"></i-input>
        </Form-item>
        <Form-item label="创建时间">
            <Row>
                <i-col span="11">
                    <Form-item prop="createtime">
                        <Date-picker type="date" placeholder="请输入创建时间" v-model="formDate.createtime"></Date-picker>
                    </Form-item>
                </i-col>
            </Row>
        </Form-item>

        <Form-item>
            <i-button type="primary" @click="handleSubmit('formDate')">提交</i-button>
            <i-button type="content" @click="handleReset('formDate')" style="margin-left: 8px">重置</i-button>
        </Form-item>
        
    </i-form>
</div>
</template>
<script>
export default {
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        // if (this.formDate.passwordCheck !== '') {
        //   // 对第二个密码框单独验证
        //   this.$refs.formDate.validateField('passwordCheck')
        // }
        callback()
      }
    }
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.formDate.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      formDate: {
        userid:'',
        loginname: '',
        password: '',
        passwordCheck:'',
        state: '',
        realname: '',
        createtime: ''

      },
      ruleValidate: {
        loginname: [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ],
        password: [
         
          { min: 1, max: 8, message: '长度在 6到 8 个字符', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        passwordCheck: [
          { validator: validatePassCheck, trigger: 'blur' }
        ],
        state: [
          { required: true, message: '状态不能为空', trigger: 'blur' }
        ],
        realname: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        createtime: [
          { required: true, type: 'date', message: '创建时间不能为空', trigger: 'change' }
        ],
      }
    }
  },
  methods: {
    // // 提交
    // handleSubmit (fromName) {

    //   this.$refs[fromName].validate((valid) => {
    //     if (valid) {
    //       this.$Message.success('Success!')
    //     } else {
    //       this.$Message.error('Fail!')
    //     }
    //   })

      // this.$axios.post("sysuser",{
      //   loginname: this.formDate.loginname,
      //   password: this.formDate.password,
      //   state: this.formDate.state,
      //   realname: this.formDate.realname,
      //   createtime: this.formDate.createtime
      // }).then(response => {
      //   console.log(response.data)
      //   if(response.data.code == 0){
      //     this.$router.push('sysUserList')
      //   }else{
      //     this.$Message.error('添加失败!')
      //   }
      // })
      //   .catch()


      
    // },
    handleSubmit:function (name) {
      this.$axios.post('sysuser',{
        userid:this.formDate.userid,
        loginname:this.formDate.loginname,
        password:this.formDate.password,
        passwordCheck:this.formDate.passwordCheck,
        state:this.formDate.state,
        realname:this.formDate.realname,
        createtime:this.formDate.createtime,
      })
      .then(response=>{
        if(response.data.code==0){
          this.$router.push("sysUserList"),
          alert("添加成功")
        }
      }
      )
        .catch()
    },
    // 重置
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>
